<template>
  <!-- 添加,修改 语言项目 -->
  <el-dialog
    title="导出设置"
    :visible.sync="dialogExportVisible"
    :close-on-click-modal="false"
    width="550px"
  >
    <!-- 平台选择 -->
    <div style="height:430px;">
      <div style="margin-bottom:30px">
        <h3 style="margin-bottom:10px">iOS</h3>
        <el-checkbox
          style="margin-bottom:5px"
          v-for="item in iOScheckedItems"
          :label="item.name"
          :key="item.indef"
          :checked="item.check"
          @change="checked => handleiOSCheckChange(checked, item)"
          >{{ item.name }}</el-checkbox
        >
        <div>
          <el-checkbox
            style="margin-top:20px"
            label="使用使用简体中文作为Key"
            key="usezhkey"
            :checked="iOSExportUseZhtKey"
            @change="checked => isiOSUserZhkey(checked)"
          >
            <span style="font-weight:bold;font-size:16px;">
              是否使用简体中文作为key</span
            ></el-checkbox
          >
        </div>
      </div>

      <div style="margin-bottom:30px">
        <h3 style="margin-bottom:10px">android</h3>
        <el-checkbox
          style="margin-bottom:5px"
          v-for="item in androidcheckedItems"
          :label="item.name"
          :key="item.indef"
          :checked="item.check"
          @change="checked => handleAndroidCheckChange(checked, item)"
          >{{ item.name }}</el-checkbox
        >
      </div>
    </div>

    <!-- 两个按钮 -->
    <div slot="footer" class="dialog-footer">
      <!-- <el-button @click="cancelEditBanner">取 消</el-button> -->
      <!-- <el-button type="primary" @click="okAction">确 定</el-button> -->
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    //是否显示返回按钮
    // dialogExportVisible: {
    //   type: Boolean,
    //   default: false
    // }
  },

  data() {
    return {
      dialogExportVisible: false,
      //---------导出设置----------

      iOScheckedItems: this.$store.state.iOSExportLangs,
      androidcheckedItems: this.$store.state.androidExportLangs,
      iOSExportUseZhtKey: this.$store.state.iOSExportUseZhtKey
    };
  },

  methods: {
    // 取消编辑
    cancelEditBanner() {
      this.dialogExportVisible = false;
    },

    // 确定
    okAction() {
      // console.log("ios", this.$store.state.iOSExportLangs);
      // console.log("android", this.$store.state.androidExportLangs);
      this.dialogExportVisible = false;
    },

    // iOS 选择
    handleiOSCheckChange(val, item) {
      item.check = val;
      let array = Array();
      for (let v of this.iOScheckedItems) {
        if (v.check == true) {
          array.push(v.indef);
        }
      }
    },

    // iOS 是否使用简体中文key
    isiOSUserZhkey(val) {
      this.$store.state.iOSExportUseZhtKey = val;
    },

    // android 选择
    handleAndroidCheckChange(val, item) {
      item.check = val;
      let array = Array();
      for (let v of this.androidcheckedItems) {
        if (v.check == true) {
          array.push(v.indef);
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../style/mixin.less";

h3 {
  font-size: 20px;
}
</style>
